import { FC, ReactElement } from "react";
import { createPortal } from "react-dom";

import styled from "./styled.module.scss";

interface Props {
  children: ReactElement;
}
const Index: FC<Props> = ({ children }) => {
  const element = (
    <div className={styled.tips}>
      <div className={styled.content}>{children}</div>
    </div>
  );
  // return element;
  return createPortal(element, document.querySelector("body") as HTMLElement);
  // 语法：return  React.createPortal(虚拟DOM/JSX,  document.qs('body'))
  // 作用：组件访问指定位置   避免样式污染等
};

export default Index;
